<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <link href="css/widgets.css" rel="stylesheet"/>
    <title>add model</title>

    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css"/>
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="js/Sandcastle-header.js"></script>
    <script type="text/javascript" src="js/require.js"></script>
    <script type="text/javascript" src="js/Cesium.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>

        html, body, #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
<style>
    @import url(css/bucket.css);

    #toolbar {
        background: rgba(42, 42, 42, 0.8);
        padding: 4px;
        border-radius: 4px;
    }

    #toolbar input {
        vertical-align: middle;
        padding-top: 2px;
        padding-bottom: 2px;
    }
</style>

<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar">
    <!--<div>Height</div>-->
    <!--<input type="range" min="-100.0" max="100.0" step="1" data-bind="value: height, valueUpdate: 'input'">-->
    <!--<input type="text" size="5" data-bind="value: height">-->
    <!--<input value="0" id="height" type="text">-->
    <!--<button onclick="createModel()">添加</button>-->


    <div class="panel panel-default">
        <div class="panel-heading">车</div>
        <div class="panel-body">
            <div>
                <img src="img/car.jpg" style="height: 100px">
            </div>
            <hr/>
            <!-- Single button -->
            <div class="btn-group">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                        aria-haspopup="true"
                        aria-expanded="false">
                    参数 <span class="caret"></span>
                </button>

                <button type="button" class="btn btn-default dropdown-toggle" onclick="createModel()"><a>确认添加</a></button>

                <ul class="dropdown-menu">
                    <li><a href="#">经度<input id="val1" type="text" style="color: #000000"/></a></li>
                    <li><a href="#">纬度<input id="val2" type="text" style="color: #000000"/></a></li>
                    <li><a href="#">高度<input id="val3" type="text" style="color: #000000"/></a></li>
                </ul>
            </div>
        </div>
    </div>


</div>
<script>
    var viewer = new Cesium.Viewer('cesiumContainer', {
        // imageryProvider: Cesium.createOpenStreetMapImageryProvider({
        //     url: 'https://a.tile.openstreetmap.org/'
        // }),
        imageryProvider: new Cesium.SingleTileImageryProvider({
            url: 'img/worldimage.jpg'
        }),
        shouldAnimate: false,
        infoBox: false,
        selectionIndicator: false,
        shadows: false,
        geocoder: false,
        homeButton: false,
        sceneModePicker: false,
        baseLayerPicker: false,
        navigationHelpButton: false,
        // animation: false,
        // timeline: false,
        fullscreenButton: false
    });
    // createModel();


    var scene = viewer.scene;
    //显示坐标
    var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
    handler.setInputAction(function (movement) {
        var cartesian = scene.camera.pickEllipsoid(movement.endPosition, ellipsoid);
        var ellipsoid = scene.globe.ellipsoid;
        if (cartesian) { //能获取，显示坐标
            var cartographic = ellipsoid.cartesianToCartographic(cartesian);
            var coords = '经度' + Cesium.Math.toDegrees(cartographic.longitude).toFixed(6) + ', ' + '纬度' + Cesium.Math.toDegrees(cartographic.latitude).toFixed(6) + '，' + '高度' + Math.ceil(viewer.camera.positionCartographic.height);
            // document.getElementByIdx_x_x('coords').innerHTML = coords; document.getElementByIdx_x_x('coords').style.display = '';
            console.log("-->" + coords)
            $("#val1").val(Cesium.Math.toDegrees(cartographic.longitude).toFixed(6))
            $("#val2").val(Cesium.Math.toDegrees(cartographic.latitude).toFixed(6))
            $("#val3").val(Math.ceil(viewer.camera.positionCartographic.height))

        } else { //不能获取不显示
            // document.getElementByIdx_x_x('coords').style.display = 'none';
            console.log("-->" + 不能获取不显示)
        }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

    /*    // 设置鼠标位置经纬度\视角高度实时显示
        var canvas = viewer.scene.canvas;
        //具体事件的实现
        var ellipsoid = viewer.scene.globe.ellipsoid;
        var handler = new Cesium.ScreenSpaceEventHandler(canvas);
        handler.setInputAction(function (movement) {
            //捕获椭球体，将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标，返回球体表面的点
            var cartesian = viewer.camera.pickEllipsoid(movement.position, ellipsoid);
            if (cartesian) {
                //将笛卡尔三维坐标转为地图坐标（弧度）
                var cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
                //将地图坐标（弧度）转为十进制的度数
                var lat_String = Cesium.Math.toDegrees(cartographic.latitude).toFixed(2);
                var log_String = Cesium.Math.toDegrees(cartographic.longitude).toFixed(2);
                // 获取相机的海拔高度作为视角高度/km
                var alti_String = (viewer.camera.positionCartographic.height / 1000).toFixed(2);
                console.log(lat_String); console.log(log_String); console.log(alti_String);
            }
        },Cesium.ScreenSpaceEventType.LEFT_CLICK);*/


    var params = {
        tx: $("#val1").val(),    //模型中心X轴坐标（经度，单位：十进制度）   
        ty: $("#val2").val(),     //模型中心Y轴坐标（纬度，单位：十进制度）   
        tz: 0,      //模型中心Z轴坐标（高程，单位：米）   
        rx: 0,     //X轴（经度）方向旋转角度（单位：度）   
        ry: 0,     //Y轴（纬度）方向旋转角度（单位：度）   
        rz: 0      //Z轴（高程）方向旋转角度（单位：度）
    };

    function createModel() {

        console.log("------>" + $("#height").val());


        // viewer.entities.removeAll();

        var position = Cesium.Cartesian3.fromDegrees($("#val1").val(), $("#val2").val(), $("#val3").val());
        var heading = Cesium.Math.toRadians(135);
        var pitch = 0;
        var roll = 0;
        var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
        var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);

        var entity = viewer.entities.add({
            name: 'model/CesiumMilkTruck/CesiumMilkTruck.glb',
            position: position,
            orientation: orientation,
            model: {
                uri: 'model/CesiumMilkTruck/CesiumMilkTruck.glb',
            }
        });
        viewer.trackedEntity = entity;


        /*viewer.scene.globe.depthTestAgainstTerrain = true;
        // var url = "model/daodan/tileset.json";
        var url = Cesium.IonResource.fromAssetId(1);
        var tileset = new Cesium.Cesium3DTileset({url: url});

        var primitive1 = viewer.scene.primitives.add(tileset);

        primitive1.readyPromise.then(function (t) {
            console.log("====>"+$("#val1").val() + ","+$("#val2").val())
            var originalSphere = t.boundingSphere;
            var radius = originalSphere.radius;
            viewer.zoomTo(t, new Cesium.HeadingPitchRange(0.5, -0.5, radius * 4.0));
            //平移、贴地、旋转模型
            //旋转
            var mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(params.rx));
            var my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(params.ry));
            var mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(params.rz));
            var rotationX = Cesium.Matrix4.fromRotationTranslation(mx);
            var rotationY = Cesium.Matrix4.fromRotationTranslation(my);
            var rotationZ = Cesium.Matrix4.fromRotationTranslation(mz);
            //平移
            // var position = Cesium.Cartesian3.fromDegrees(params.tx, params.ty, $("#val3").val());
            var position = Cesium.Cartesian3.fromDegrees($("#val1").val(), $("#val2").val(), $("#val3").val());

            var m = Cesium.Transforms.eastNorthUpToFixedFrame(position);
            //旋转、平移矩阵相乘
            Cesium.Matrix4.multiply(m, rotationX, m);
            Cesium.Matrix4.multiply(m, rotationY, m);
            Cesium.Matrix4.multiply(m, rotationZ, m);    //赋值给tileset   
            tileset._root.transform = m;

        }).otherwise(function (error) {

            var msg = JSON.stringify(error);

            console.log("msg ------------->" + msg);
        });*/
    }

</script>
</body>
</html>
